Types of CSS (Ways to Implement CSS)

There are three main types of CSS:

INLINE CSS
INTERNAL CSS
EXTERNAL CSS

1. INLINE CSS

Inline CSS is used to apply styles directly within an HTML element using the "style" attribute. This method is suitable for small, one-off changes but is not recommended for large-scale styling.

For example:

<body>
<div style="background-color:red;">
CONTENT
</div>
</body>

2. INTERNAL CSS

Internal CSS is written within the <style> tag inside the <head> section of the HTML document. This method is useful when you want to style a single document.

For example:

<head>
  <style>
    div {
      background-color: red;
    }
  </style>
</head>

<body>
  <div>
    CONTENT
  </div>
</body>

3. EXTERNAL CSS

External CSS involves creating a separate .css file and linking it to your HTML document using the <link> tag. This is the most efficient and scalable method of styling, especially for large websites.

For example:

Index.html

<head>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
  <div>
    CONTENT
  </div>
</body>

Style.css


div {
  background-color: red;
}

NOTES:-

We can use Extrnal css and Internal css inside <head> and <body> tag (work).
If we use External and Internal css Inside <body> tag.but it is bad practice.
We can allways External and Internal css used inside.